<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui">
    
 

    <p:layout >
        <p:layoutUnit position="center" id="centerPanelContentMiddle" style="border: 0">
            <h:form id = "middleContentForm">  
                <br />

                <!--        <p:fieldset>-->
                <center>
                    <br></br>
                    <br></br>
                    <br></br>
                    <div align="center" >
                        <div style="width: 700px">
                            <p:messages id="messages" showDetail="true" autoUpdate="true" closable="true"  escape="false" />
                        </div>
                        <p:panel style="border:0">
                            <h:panelGrid columns="2" id="loginGrid0" style="border: 0">
                                <p:panel header="Guest Login" style="width:380px;" id="guestLoginPanel">
                                    <h:panelGrid columns="2" id="loginGrid1">
                                        <p:graphicImage value="/images/people.png" width="90"/>
                                        <p:fieldset> 	
                                            <h:panelGrid columns="1" id="loginGrid11">
                                                <p:inputText id="guestEmailId" value="#{loginBean.guestEmailId}" required="true" size="20" onfocus="this.value='';">
                                                    
                                                </p:inputText>
                                                <p:inputText id="guestFullName" value="#{loginBean.guestFullName}" required="true" size="20" onfocus="this.value='';">
                                                    
                                                </p:inputText>
                                                <p:commandButton process ="@this,guestEmailId,guestFullName" ajax="true" value="Demo" action="#{loginBean.addProspectiveUser()}" update="growl" />
                                            </h:panelGrid>
                                        </p:fieldset>
                                    </h:panelGrid>
                                    <br />
                                    <h:outputLink value="#" onclick="PF('addNewUserDlg').show()" style="color: red">Sign Up ...</h:outputLink>
                                </p:panel> 
                                <p:panel header="User Login" style="width:380px;" id="userLoginPanel">
<!--                                    <p:focus context="userLoginPanel" />-->
                                    <h:panelGrid columns="2" id="loginGrid2">
                                        <p:graphicImage value="/images/login.png" width="90"/>
                                        <p:fieldset> 	
                                            <h:panelGrid columns="1" id="loginGrid21">
                                                <p:inputText id="username" value="#{loginBean.emailId}" size="20" onfocus="this.value='';">
                                                </p:inputText>
                                                <p:password id="password" value="#{loginBean.password}" required="true" size="20" />
                                                <p:commandButton process ="@this,username,password" value="Login" ajax="true" action="#{loginBean.authenticateUser()}" update="growl" />
                                            </h:panelGrid>
                                        </p:fieldset>
                                    </h:panelGrid>
                                    <br />
                                    <h:outputLink value="#" onclick="forgotPassword.show();" style="color: red">Not able to access your account ?</h:outputLink>
                                </p:panel> 	                    	                        			
                            </h:panelGrid>
                        </p:panel>

                    </div>
                    <!-- <p:commandButton id="basic" value="Not able to access your account ?" onclick="forgotPassword.show();" type="button" /> -->
                    <br></br>

                    <br></br>   
                    <br></br>
                </center>
                <!--        </p:fieldset> -->

                <p:dialog id="forgot" header="Forgot Password" widgetVar="forgotPassword" resizable="false" width="500">
                    <p:fieldset>  
                        <p:tab title="Forgot Password">  
                            <h:panelGrid columns="2" cellpadding="10">  
                                <p:graphicImage value="/images/blue-face.png" />  
                                <h:outputText  
                                    value="Please click on the 'Email my login information button';  Your login information will be mailed to your email registered with us." />
                            </h:panelGrid>
                            <div align="center">
                                <p:commandButton value="Email my login information" onclick="forgotPassword.hide();" />
                            </div>      
                        </p:tab>  
                    </p:fieldset>
                </p:dialog>
                <p:growl id="growl" showDetail="true" sticky="true" />

            </h:form>
                <p:dialog id="addNewUserDialog" modal="true" header="Add New User" appendTo="@(body)" draggable="false" widgetVar="addNewUserDlg" resizable="false" width="500">
                    <h:form id="signupNewUserForm" prependId="false" >
                    <p:fieldset>  
                        <div align="center">
                            <h:panelGrid id="newUserInfo" columns="2" cellpadding="10">  
                                <p:graphicImage value="/images/people.png" />
                                <table>
                                    <tr><td><h:inputText id="newUserFirstName" value="#{loginBean.newUserFirstName}" onclick="this.value='';" style="height: 30px;width: 240px; font-size: 18px; color: #AFAFAF; padding: 10px;"></h:inputText></td></tr>
                                    <tr><td><h:inputText id="newUserLastName" value="#{loginBean.newUserLastName}" onfocus="this.value='';" style="padding: 10px;color: #AFAFAF; height: 30px;width: 240px; font-size: 18px;"></h:inputText></td></tr>
                                    <tr><td><h:inputText id="newUserEmailId" value="#{loginBean.newUserEmailId}" onfocus="this.value='';" style="height: 30px;width: 240px; font-size: 18px; color: #AFAFAF; padding: 10px;"></h:inputText></td></tr>
                                    <tr><td><p:password id="newUserPassword" value="#{loginBean.newUserPassword}" style="padding: 10px;color: #AFAFAF; height: 30px;width: 240px; font-size: 30px;"></p:password></td></tr>
                                </table>
                            </h:panelGrid>
                            <div align="center">
                                <p:commandButton value="Sign Up Now" process="@this,newUserFirstName,newUserLastName,newUserEmailId,newUserPassword" 
                                                 oncomplete="PF('addNewUserDlg').hide();"
                                                 action="#{loginBean.signupNewUser}" />
                            </div>      
                        </div>
                    </p:fieldset>
                    </h:form>    
                </p:dialog>

        </p:layoutUnit>  

    </p:layout>
</ui:composition>
